/**
* @Author: 李晨光
* @Date: 2019/12/10
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/10
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="Preview">
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="open">
      <mu-appbar color="primary" class="lan-header search-header">
        <slot name="dialog-header">
          <mu-button icon slot="left" @click="closeDialog">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>图片预览
        </slot>
      </mu-appbar>
      <div
        style="width: 100%;height: calc(100% - .45rem);"
        class="ly_flex ly_flex_ali_center ly_flex_just_center"
      >
        <mu-carousel :cycle="false" :active="slideIndex">
          <mu-carousel-item v-for="(img, index) in imgUrls" :key="index">
            <div
              style="position:relative;width: 100%;overflow: hidden;background: #fff"
              class="ly_flex ly_flex_ali_center ly_flex_just_center"
            >
              <div
                id="targetObj"
                style="position:relative;transform-origin:center;width: 100%;height: 100%;"
              >
                <img :src="img" @load="init" />
              </div>
            </div>
          </mu-carousel-item>
        </mu-carousel>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
import cat from "#/assets/js/scale/cat.touchjs.js";
export default {
  name: "Preview",
  components: {},
  props: {
    open: {
      type: Boolean,
      default: false
    },
    imgUrls: {
      type: Array,
      default: () => {
        return [];
      }
    },
    slideIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      scale: 1, // 缩放比例
      left: 0, // 定位left
      top: 0 // 定位right
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    //初始化设置
    init() {
      let $targetObj = $("#targetObj");
      //初始化设置
      cat.touchjs.init($targetObj, (left, top, scale, rotate) => {
        $("#left").text(left);
        $("#top").text(top);
        $("#scale").text(scale);
        $("#rotate").text(rotate);
        this.scale = scale;
        this.left = left;
        this.top = top;
        $targetObj.css({
          left: left,
          top: top,
          transform: "scale(" + scale + ") rotate(" + rotate + "deg)",
          "-webkit-transform": "scale(" + scale + ") rotate(" + rotate + "deg)"
        });
      });
      //初始化拖动手势
      cat.touchjs.drag($targetObj, (left, top, type, event) => {
        if (type == "drag") {
          if (this.scale != 1) {
            $("#left").text(left);
            $("#top").text(top);
            this.left = left;
            this.top = top;
          }
        } else {
          this.close();
        }
        console.log(left);
      });
      //初始化缩放手势
      cat.touchjs.scale($targetObj, scale => {
        $("#scale").text(scale);
        this.scale = scale;
      });
      //初始化旋转手势
      // cat.touchjs.rotate($targetObj, function (rotate) {
      //   $('#rotate').text(rotate);
      // });
    },
    // 打开
    openDialog() {
      this.$emit("open", true);
    },
    // 关闭
    closeDialog() {
      this.$emit("close", true);
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>
